<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form :form="form"  style="height: 100%;display: block;">
                    <a-form-item style="display:none;">
                        <a-input v-decorator="['userId']"/>
                        <a-input v-decorator="['mainDepId']"/>
                        <a-input v-decorator="['wxOpenId']"/>
                        <a-input-number v-decorator="['sn']"/>
                    </a-form-item>
                    <div class="individual-common">
                        <div class="individual-center">
                            <div class="individual-upload">
                                <a-upload
                                    name="files"
                                    listType="picture-card"
                                    :showUploadList="false"
                                    action="/api/api-system/system/core/sysFile/upload"
                                    :headers="headers"
                                    :beforeUpload="beforeUpload"
                                    @change="handleChange"
                                    style="width: 100%;height: 100%;"
                                >
                                    <img v-if="imageUrl" :src="imageUrl" alt="photo" class="userHeadPortrait" style="max-width: 100%;object-fit: cover" />
                                    <div v-else>
                                        <a-icon :type="loading ? 'loading' : 'plus'" />
                                        <div class="ant-upload-text">{{$ti18('rxList.upload','上传')}}</div>
                                    </div>
                                </a-upload>
                                <span class="avatar-uploader">{{i18n('form.suggestion','建议上传1:1尺寸')}}</span>
                            </div>
                            <div style="flex: 1">
                                <div class="individual-fullName">{{mdl.fullName}}-{{mdl.mainDepName}}</div>
                                <div class="individual-userNo">
                                    <div class="individual-userNo-name"><span>{{i18n('form.accountNum','账号')}}：</span>{{mdl.userNo}}</div>
                                    <div class="individual-userNo-name"><span>{{i18n('form.entryTime','入职时间')}}：</span>{{mdl.entryTime}}</div>
                                </div>
                                <div class="individual-userNo">
                                    <div class="individual-userNo-name" v-if="userTypeName!='NO'"><span>{{i18n('form.userType','用户类型')}}：</span>{{userTypeName}}</div>
                                    <div class="individual-userNo-name-list">
                                        <div v-for="(json,index) in jsonArray" :key="index" class="individual-jsonArray-list" v-if="json.groupIds">
                                            <span style="margin-right: 5px;color: #000000;">{{json.dimName}}:</span>
                                            <span class="individual-userNo-groupNames" :title="json.groupNames">{{json.groupNames}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a-button class="individual-button" type="primary" ghost @click="changePwd()"> <a-icon type="form" />{{i18n('list.resetPwd','重置密码')}}</a-button>
                        </div>
                        <div class="individual-common-tabs">
                            <a-tabs defaultActiveKey="1" class="rxTabs">
                                <a-tab-pane key="1" :tab="i18n('list.information','基本信息')">
                                    <a-row >
                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.sex','性别')">
                                                <a-radio-group buttonStyle="solid" defaultValue="male" v-decorator="['sex', {initialValue:'male',rules: [{required: false, message: i18n('form.sex','性别','select')}]}]">
                                                    <a-radio-button value="male">{{i18n('male','男士')}}</a-radio-button>
                                                    <a-radio-button value="female">{{i18n('female','女士')}}</a-radio-button>
                                                </a-radio-group>
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.birthday','出生日期')">
                                                <a-date-picker :format="birthdayFormat" :placeholder="i18n('form.birthday','出生日期','select')" v-decorator="['birthday', {rules: [{required: false, message: i18n('form.birthday','出生日期','select')}]}]"/>
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.phoneNum','手机')">
                                                <a-input :placeholder="i18n('form.phoneNum','手机','input')" v-decorator="['mobile', {rules: [{required: false, message: i18n('form.phoneNum','手机','input')}]}]"/>
                                            </a-form-item>
                                        </a-col>

                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.email','邮件')">
                                                <a-input :placeholder="i18n('form.email','邮件','input')" v-decorator="['email', {rules: [{required: false, message: i18n('form.email','邮件','input')}]}]"/>
                                            </a-form-item>
                                        </a-col>

                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.qqNumber','QQ号')">
                                                <a-input :placeholder="i18n('form.qqNumber','QQ号','input')" v-decorator="['qq', {rules: [{required: false, message: i18n('form.qqNumber','QQ号','input')}]}]"/>
                                            </a-form-item>
                                        </a-col>

                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="{span:20}" :label="i18n('form.address','地址')">
                                                <a-input :rows="4" :placeholder="i18n('form.address','地址','input')" v-decorator="['address', {rules: [{required: false, message: i18n('form.address','地址','input')}]}]" />
                                            </a-form-item>
                                        </a-col>

                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.urgentContact','紧急联系人')">
                                                <a-input :placeholder="i18n('form.urgentContact','紧急联系人','input')" v-decorator="['urgent', {rules: [{required: false, message: i18n('form.urgentContact','紧急联系人','input')}]}]"/>
                                            </a-form-item>
                                        </a-col>

                                        <a-col :span="12">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.urgentPhone','紧急联系人手机')">
                                                <a-input :placeholder="i18n('form.urgentPhone','紧急联系人手机','input')" v-decorator="['urgentMobile', {rules: [{required: false, message: i18n('form.urgentPhone','紧急联系人手机','input')}]}]"/>
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                </a-tab-pane>
                                <a-tab-pane key="2" :tab="i18n('list.xAttrs','扩展属性')" forceRender>
                                    <div class="rxContent">
                                        <ExtendedProperties :propertiesGroups="propertiesGroups" :readOnly="true"></ExtendedProperties>
                                    </div>
                                </a-tab-pane>
                            </a-tabs>
                        </div>
                    </div>
                </a-form>
            </div>
        </rx-layout>

    </rx-dialog>
</template>
<script>
import OsUserApi from '@/api/user/org/osUser'
import OsusertypeApi from '@/api/user/org/osUserType'
import { BaseForm,RxDialog,Dialog,RxLayout,Util ,RxTextBoxList,TokenUtil} from "@lowcode/jpaas-common-lib"
import moment from 'moment';
import OsUserUpdatePwd from './OsUserUpdatePwd'
import ExtendedProperties from './ExtendedProperties'
import osPropertiesGroupApi from '@/api/user/org/osPropertiesGroup'
import dayjs from 'dayjs';
export default {
    name: 'OsUserEdit1',
    props: {
        userId:String,
        groupId:String,
        relTypeId:String
    },
    components: {
        RxDialog,
        RxTextBoxList,
        RxLayout,
        ExtendedProperties
    },
    mixins:[BaseForm],
    data () {
        return {
            labelCol: {span: 6},
            wrapperCol: {span: 15},
            osUserTypes:[],
            userTypeName:'NO',
            mainDepId:'',
            birthdayFormat:'YYYY-MM-DD',
            dateFormat:'YYYY-MM-DD HH:mm:ss',
            jsonArray:[],
            imageUrl:"",
            loading:false,
            headers:{},
            disabled:true,
            mdl: {},
            propertiesGroups:[]
        }
    },
    created () {
        var token =TokenUtil.getToken();
        if (token) {
            this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
        }
        OsusertypeApi.getAllUserTypeList().then(data=>{
            this.osUserTypes=data;
        });
        var self=this;
        this.pkId=this.userId;
        OsUserApi.edit(this.userId).then(data=>{
            this.jsonArray=data.dimArray;
            var userData=data.user;
            userData.mainDepId=data.mainDepId;
            userData.mainDepName=data.mainDepName;
            this.mdl = Object.assign(userData);
            //设置用户数据
            this.form.setFieldsValue(this.mdl);
            //获取用户类型名称
            for (var i=0;i<this.osUserTypes.length;i++){
                if(this.osUserTypes[i].code==self.mdl.userType){
                    this.userTypeName=this.osUserTypes[i].name;
                }
            }
            //初始化数据
            this.onload_(this.mdl);
        });
        this.getPropertiesGroups();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"osUser",key);
        },
        validForm(values){
            if(values.pwd!=values.repwd){
                this.$message.error(i18n('inconsistent','两次输入的密码不一致!'))
                return false;
            }
            return true;
        },
        save(values){
            var canGroupIds="";
            this.jsonArray.filter(res=>{
                if(res.groupIds){
                    canGroupIds+=res.groupIds+",";
                }
            })
            values.canGroupIds=canGroupIds.substring(0,canGroupIds.length-1);
            if(values.birthday){
                values.birthday=values.birthday.format(this.dateFormat)
            }
            if(values.entryTime){
                values.entryTime=values.entryTime.format(this.dateFormat)
            }
            if(values.quitTime){
                values.quitTime=values.quitTime.format(this.dateFormat)
            }
            values.photo=this.photo;
            return OsUserApi.saveOsUser(values);
        },
        onload_(values){
            if(values){
                if(values.birthday){
                    if(typeof values.birthday === "number"){
                        values.birthday = dayjs(values.birthday).format(this.dateFormat)
                    }
                    values.birthday=moment(values.birthday, this.dateFormat);
                }
                if(values.entryTime && typeof values.entryTime=="number"){
                    values.entryTime = dayjs(values.entryTime).format(this.dateFormat)
                }
                if(values.photo) {
                    this.imageUrl = this.getFilePath(values.photo);
                }
            }
        },
        getFilePath(fileId){
            let token = TokenUtil.getToken();
            fileId=Util.encryptWord(fileId);
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
            if (info.file.status === 'done') {
                var res=info.fileList[info.fileList.length-1].response;
                if(res.success){
                    this.photo=res.data[0].fileId;
                    this.imageUrl=this.getFilePath(res.data[0].fileId);
                    this.loading=false;
                }
            }
        },
        beforeUpload(file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.error(this.i18n('onlyImage','只能上传图片!'));
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error(this.i18n('imageLimit','图片必须小于2MB!'));
            }
            return isJpgOrPng && isLt2M;
        },
        changePwd(){
            var self=this;
            Util.open({
                component:OsUserUpdatePwd,
                curVm:self,
                widthHeight:['800px','400px'],
                title:this.i18n('list.changePwd','修改密码'),
                data:{userId:self.userId,individual:true}
            },function (action){
            });
        },
        //获取用户扩展属性组
        getPropertiesGroups(){
            var ownerId="";
            if(this.userId){
                ownerId=this.userId;
            }
            osPropertiesGroupApi.getAllProperties({dimId:"-1",ownerId:ownerId}).then(res=>{
                this.propertiesGroups=res;
            });
        }
    }
}
</script>
<style scoped>
.individual-userNo-name-list{
    flex: 1;
    flex-flow:row wrap;
    display: flex;
}
.ant-upload-text{
    font-size: 16px;
}
.individual-jsonArray{
    display: flex;
}
.individual-jsonArray-list{
    display: flex;
    width: 30%;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
}
.individual-jsonArray-list>>>.rx-textBoxList-container{
    background-color:rgba(0,0,0,0)!important;
}
.individual-jsonArray-list>>>.rx-textBoxList{
    background-color:rgba(0,0,0,0)!important;
}
.individual-common{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
.individual-common-tabs{
    flex: 1;
    overflow: auto;
}
.individual-center{
    display: flex;
    align-items: center;
    padding: 20px;
    width: 100%;
    min-height: 140px;
    border-radius: 4px;
    background-image:url("../../../../image/Individual.png");
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}
.individual-button{
    position: absolute;
    right: 24px;
    top: 25px;
}
.individual-upload{
    margin-right: 20px;
}
.individual-fullName{
    color: #000000;
    font-size: 18px;
}
.individual-userNo{
    display: flex;
    font-size: 14px;
    margin-top: 10px;
    align-items: center;
}
.individual-userNo-name{
    min-width: 217px;
    margin-right: 20px;
}
.individual-userNo-name span{
    min-width:60px;
    margin-right: 5px;
    color: #000000;
}
.individual-userNo-groupNames{
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
}
.avatar-uploader{
    font-size: 12px;
    line-height: 1px;
    font-weight: normal;
    color: #c7c7c7;
}
</style>